CSS-i fondi funktsioonide väärtused: OpenType'i funktsioonide meisterlik valdamine

Veebidisaini dünaamilises maailmas mängib tüpograafia keskset rolli brändi identiteedi edastamisel, loetavuse parandamisel ja köitvate visuaalsete kogemuste loomisel. Kuigi põhiliste fondistiilide kasutamine on lihtne, nõuab keerukamate tüpograafiliste efektide saavutamine sageli süvenemist OpenType-fontide täiustatud võimalustesse. Õnneks pakub CSS võimsaid tööriistu nende võimaluste rakendamiseks font-feature-values kaudu. See põhjalik juhend uurib, kuidas neid CSS-i funktsioone kasutada, et saavutada detailne kontroll OpenType'i funktsioonide üle, andes teile võimaluse tõsta oma veebitüpograafia rahvusvahelisele professionaalsele tasemele.

OpenType-fontide ja nende funktsioonide mõistmine

Enne CSS-i juhtelementidesse süvenemist on oluline mõista, mis on OpenType-fondid ja miks need nii väärtuslikud on. OpenType, mille töötasid ühiselt välja Microsoft ja Adobe, on väga mitmekülgne fondivorming, mis laiendab vanemate vormingute, nagu TrueType ja PostScript, võimalusi. See on loodud toetama laia valikut keeli ja tüpograafilisi tavasid, muutes selle ideaalseks globaalsele publikule.

OpenType'i tõeline jõud peitub selle toetuses laiale valikule tüpograafilistele funktsioonidele, mida sageli nimetatakse OpenType'i funktsioonideks või fondi funktsioonideks. Need funktsioonid võimaldavad täiustatud stilistilisi ja keelelisi kohandusi, mis ulatuvad kaugemale lihtsast märkide asendamisest. Mõned kõige levinumad ja mõjukamad OpenType'i funktsioonid on:

• Ligatuurid: Need on üksikud glüüfid, mis esindavad kahte või enamat märki. Levinud ligatuurid on 'fi', 'fl', 'ff', 'ffi' ja 'ffl'. Need parandavad loetavust ja esteetikat, ühendades problemaatilisi märgipaare, mis muidu võiksid kattuda või kohmakad välja näha.
• Kontekstuaalsed alternatiivid: Need funktsioonid kohandavad märke automaatselt neid ümbritsevate märkide põhjal, tagades loomulikuma voo ja ühtlase välimuse, eriti keeruliste ühendamisreeglitega kirjades.
• Ehisvariandid: Need on dekoratiivsed kaunistused, mida saab lisada märkidele, sageli sõnade algusesse või lõppu, andes elegantse ja väljendusrikka lihvi.
• Stiilikomplektid (ss01-ss20): Paljud OpenType-fondid sisaldavad teatud märkide jaoks eelnevalt kujundatud stiililisi alternatiive. Need komplektid võimaldavad disaineritel vahetada tähtede, numbrite või kirjavahemärkide erinevate kujunduste vahel, pakkudes ühe fondiperekonna sees mitmesuguseid esteetilisi valikuid.
• Vana stiili numbrid (onum): Erinevalt tabelinumbritest (rivinumbritest) on vana stiili numbritel üla- ja alapikendid, mis sarnanevad väiketähtedega. Need sobivad eriti hästi leivateksti ja ajaloolistesse kontekstidesse, sulandudes harmoonilisemalt ümbritseva tekstiga.
• Murrud: Need on eelnevalt kujundatud tüpograafilised murrud, mis näevad välja peenemad kui virnastatud diagonaalsed murrud.
• Kapiteelid: Kuigi mitte rangelt võttes OpenType'i funktsioon kõigil juhtudel, sisaldavad fondid sageli spetsiaalseid kapiteelglüüfe, mis on eelistatavamad võltskapiteelidele, mis on loodud lihtsalt suurtähtede skaleerimisega.
• Kerning: Kuigi kerningut hallatakse sageli automaatselt fondi meetrika abil, võimaldavad mõned OpenType'i funktsioonid täpsemat kontrolli konkreetsete märgipaaride vahelise vahe üle.

Nendele funktsioonidele pääseb tavaliselt ligi lauaarvuti kirjastustarkvara, nagu Adobe InDesign või Illustrator, kaudu, kasutades spetsiifilisi glüüfinimesid või funktsioonikoode. Veebis on aga nende funktsioonide juhtimise peamine meetod CSS.

Sissejuhatus font-feature-settings atribuuti

Kõige põhilisem CSS-i atribuut OpenType'i funktsioonide juhtimiseks on font-feature-settings. See võimaldab teil lubada või keelata spetsiifilisi OpenType'i funktsioone, esitades nende neljatähelised funktsioonisildid. Need sildid on standardiseeritud tunnused, mis on määratletud OpenType'i spetsifikatsioonis.

Levinud font-feature-settings sildid

Siin on mõned kõige sagedamini kasutatavad funktsioonisildid, mida saate font-feature-settings abil juhtida:

• liga: Lubab standardsed ligatuurid.
• clig: Lubab kontekstuaalsed ligatuurid (kasutatakse sageli koos `liga` sildiga).
• dlig: Lubab valikulised ligatuurid (harvemini kasutatav, sageli stilistilise efekti saavutamiseks).
• salt: Lubab stiililised alternatiivid.
• swsh: Lubab ehisjooned.
• onum: Lubab vana stiili numbrid.
• lnum: Lubab rivinumbrid (vaikimisi).
• frac: Lubab murrud.
• smcp: Lubab kapiteelid.
• cpsp: Lubab suurtähtede vahekauguse reguleerimise.
• kern: Lubab kerningu (sageli vaikimisi hallatud).

Atribuudi font-feature-settings kasutamine

Atribuudi font-feature-settings süntaks on komadega eraldatud loend funktsioonisiltidest ja nende soovitud olekutest:

• 'funktsiooni-silt' on: Lubab funktsiooni.
• 'funktsiooni-silt' off: Keelab funktsiooni.
• 'funktsiooni-silt' 1: Lubab funktsiooni (paljude funktsioonide puhul samaväärne väärtusega on).
• 'funktsiooni-silt' 0: Keelab funktsiooni (paljude funktsioonide puhul samaväärne väärtusega off).
• 'funktsiooni-silt' väärtus: Funktsioonide puhul, mis toetavad mitut varianti (nt stiilikomplektid), valib numbriline väärtus konkreetse variandi.

Näide: Ligatuuride ja vana stiili numbrite lubamine

            
body {
  font-family: 'Merriweather', serif;
  font-feature-settings: 'liga' on, 'onum' on;
}

            

              
                Copy
              
            
          

Selles näites rakendame 'Merriweather' fonti lehe sisule. Seejärel lubame standardsed ligatuurid (`'liga' on`) ja vana stiili numbrid (`'onum' on`). See tähendaks, et märgikombinatsioonid nagu 'fi' ja 'fl' renderdatakse nende vastavate ligatuurglüüfidena ning numbrid nagu '123' kasutaksid vana stiili numbrite kujundust, kui font neid toetab.

Näide: Ligatuuride keelamine

Kuigi ligatuurid parandavad sageli loetavust, võib esineda juhtumeid, kus need pole soovitavad, näiteks koodilõikudes või spetsiifilistes keelelistes kontekstides. Saate need keelata, kasutades:

            
.code-snippet {
  font-family: 'Fira Code', monospace;
  font-feature-settings: 'liga' off;
}

            

              
                Copy
              
            
          

Näide: Stiilikomplektide kasutamine

Paljud OpenType-fondid pakuvad mitmeid stiilikomplekte. Näiteks võib fondil olla 20 erinevat stiilikomplekti, mis võimaldavad ulatuslikku kohandamist. Nendele pääseb juurde, kasutades silte nagu ss01 kuni ss20. Sildile määratud väärtus määrab, millist stiilikomplekti kasutatakse.

            
.artistic-text {
  font-family: 'Playfair Display', serif;
  font-feature-settings: 'ss01' 1; /* Aktiveerib esimese stiilikomplekti */
}

.alternative-text {
  font-family: 'Playfair Display', serif;
  font-feature-settings: 'ss02' 1; /* Aktiveerib teise stiilikomplekti */
}

            

              
                Copy
              
            
          

On ülioluline tutvuda iga fondi spetsiifilise dokumentatsiooniga, et mõista, milliseid stiilikomplekte see pakub ja milliseid stiililisi variatsioone need pakuvad. Näiteks võib 'Playfair Display' pakkuda oma stiilikomplektides erinevaid stiililisi alternatiive 'q' või 'g' jaoks.

Lühendatribuut font-variant

Atribuut font-variant on lühend mitmetele teistele fondiga seotud atribuutidele, sealhulgas mõnedele, mis kontrollivad OpenType'i funktsioone. Kuigi see on OpenType'i otsekontrolliks vähem detailne kui font-feature-settings, on see kasulik levinud stiililiste variatsioonide jaoks:

• font-variant-ligatures: Kontrollib ligatuure (nt none, normal, contextual, discretionary).
• font-variant-numeric: Kontrollib numbreid (nt lining-nums, oldstyle-nums, fractions, tabular-nums).
• font-variant-alternates: Kontrollib stiililisi alternatiive (nt normal, stylistic(value)).
• font-variant-position: Kontrollib üla- ja alaindekseid.
• font-variant-caps: Kontrollib suurtähestiku stiile (nt normal, small-caps, all-small-caps).

Näide: Atribuudi font-variant-numeric kasutamine

            
h1 {
  font-family: 'Source Sans Pro', sans-serif;
  font-variant-numeric: oldstyle-nums, fractions;
}

            

              
                Copy
              
            
          

See rakendab pealkirjale vana stiili numbreid ja murde, kui font neid toetab. See on semantilisem viis nende efektide saavutamiseks võrreldes font-feature-settings otsekasutamisega just nende konkreetsete funktsioonide jaoks.

Reegli @font-feature-values jõud: temaatiliste fondistiilide loomine

Kuigi font-feature-settings on võimas üksikute elementide stiilimiseks, võib keerukate tüpograafiareeglite haldamine suurel veebisaidil muutuda korduvaks ja raskesti hooldatavaks. Siin tulebki appi @font-feature-values at-reegel. See võimaldab teil defineerida kohandatud nimesid spetsiifilistele OpenType'i funktsiooniseadetele, muutes teie CSS-i puhtamaks, loetavamaks ja lihtsamini hallatavaks.

Kohandatud fondi funktsiooninimede defineerimine

Reegli @font-feature-values süntaks hõlmab fondiperekonna nime defineerimist ja seejärel OpenType'i funktsioonidele kohandatud võtmesõnade määramist. See võimaldab teil grupeerida seotud funktsiooniseaded ühe, meeldejääva nime alla.

Näide: 'Klassikalise' stiili defineerimine

Oletame, et teil on kirjastiil nagu 'Garamond Premier Pro', millel on suurepärane tugi vana stiili numbritele, ligatuuridele ja stiililistele alternatiividele, mis annavad sellele klassikalise tunde. Saate selle stiili jaoks defineerida kohandatud võtmesõna:

            
@font-feature-values 'Garamond Premier Pro' {
  .classic-style {
    ligatures: normal;
    oldstyle-nums: on;
    stylistic-alternates: stylistic(1);
  }

  .modern-style {
    ligatures: none;
    oldstyle-nums: off;
    stylistic-alternates: stylistic(5);
  }
}

            

              
                Copy
              
            
          

Selles näites:

• Oleme deklareerinud fondiperekonna nime, `'Garamond Premier Pro'`. See nimi peaks ideaalis vastama font-family nimele, mida hiljem kasutate.
• Oleme loonud kohandatud võtmesõna, `.classic-style`, ja määranud sellele spetsiifilised OpenType'i seaded: tavalised ligatuurid, vana stiili numbrid ja esimese stiililise alternatiivi.
• Oleme defineerinud ka `.modern-style` teistsuguste seadetega.

Kohandatud fondi funktsiooninimede rakendamine

Kui need on defineeritud, saate neid kohandatud võtmesõnu rakendada standardsete fondiatribuutide abil:

            
body {
  font-family: 'Garamond Premier Pro', serif;
}

h1 {
  font-feature-values: 'Garamond Premier Pro' classic-style;
}

p {
  font-feature-values: 'Garamond Premier Pro' modern-style;
}

            

              
                Copy
              
            
          

See lähenemine parandab oluliselt teie CSS-i hooldatavust. Keerukate font-feature-settings deklaratsioonide kordamise asemel saate kasutada lihtsaid, kirjeldavaid võtmesõnu. See on eriti kasulik, kui töötate rahvusvahelistes meeskondades või suurtes projektides, kus järjepidevus on võtmetähtsusega.

@font-feature-values kasutamine mitme fondiperekonnaga

Saate neid funktsiooniväärtuste komplekte defineerida mitmele fondiperekonnale samas stiililehes:

            
@font-feature-values 'Source Serif Pro' {
  .editorial {
    ligatures: normal;
    oldstyle-nums: on;
    swashes: swash(2);
  }
}

@font-feature-values 'Source Sans Pro' {
  .technical {
    ligatures: none;
    tabular-nums: on;
    case: small-caps;
  }
}

            

              
                Copy
              
            
          

Ja seejärel rakendada neid:

            
.article-body {
  font-family: 'Source Serif Pro', serif;
  font-feature-values: 'Source Serif Pro' editorial;
}

.ui-label {
  font-family: 'Source Sans Pro', sans-serif;
  font-feature-values: 'Source Sans Pro' technical;
}

            

              
                Copy
              
            
          

Globaalse tüpograafia kaalutlused

Globaalsele publikule disainides on tüpograafilistel valikutel oluline mõju. OpenType'i funktsioonid võivad olla abiks teie disainide kohandamisel erinevatele keeltele ja kultuurilistele eelistustele.

Keelepõhised funktsioonid

Paljud OpenType-fondid sisaldavad funktsioone, mis on spetsiaalselt loodud teatud keelte või kirjaviiside toetamiseks. Näiteks:

• Kontekstuaalsed alternatiivid on elutähtsad keelte puhul, millel on kursiivne või ühendav kiri, nagu araabia või devanagari, tagades tähtede korrektse ühendumise.
• Keelepõhised ligatuurid võivad eksisteerida teatud foneetiliste kombinatsioonide jaoks erinevates Euroopa keeltes.
• Tähemärkide lokaliseeritud vormid võivad olla lisatud, et vastata spetsiifilistele piirkondlikele tüpograafilistele tavadele.

CSS-i atribuuti lang() saab kombineerida font-feature-settings atribuudiga, et rakendada erinevaid tüpograafilisi stiile vastavalt sisu keelele.

Näide: Keelepõhine stiilimine

Oletame, et teil on font, mis toetab prantsuse tüpograafilisi tavasid, nagu spetsiifilised ligatuurid või kirjavahemärkide stiilid, ja soovite neid rakendada ainult prantsuskeelsele tekstile.

            
@font-feature-values 'Libre Baskerville' {
  .french-ligatures {
    font-feature-settings: 'flah' on; /* Näide: prantsuse ligatuuri seade */
  }
}

:lang(fr) p {
  font-family: 'Libre Baskerville', serif;
  font-feature-values: 'Libre Baskerville' french-ligatures;
}

/* Teiste keelte puhul võite keelata või kasutada vaikeseadeid */
:lang(en) p {
  font-family: 'Libre Baskerville', serif;
  font-feature-settings: 'flah' off; /* Keela spetsiifiline prantsuse ligatuur, kui see pole asjakohane */
}

            

              
                Copy
              
            
          

Märkus: Keelepõhiste funktsioonide spetsiifilised funktsioonisildid võivad oluliselt erineda. Nende siltide (nt `flah` prantsuse ligatuuridele, `rlig` nõutavatele ligatuuridele) kohta peate tutvuma fondi dokumentatsiooniga.

Loetavus erinevates seadmetes ja kultuurides

OpenType'i funktsioonid võivad oluliselt mõjutada ka loetavust erinevates seadmetes ja mitmekesiste kasutajagruppide jaoks.

• Vana stiili numbrid võivad parandada arvandmete loetavust leivatekstis, eriti aruannetes või finantsteabes, kus eelistatakse traditsioonilist esteetikat.
• Murrud muudavad arvandmed lihtsamini skannitavaks ja mõistetavaks.
• Kapiteelid on tõhusad akronüümide või lühendite jaoks, kuid nende liigne kasutamine võib vähendada loetavust, eriti pikemates lõikudes.

Võtke arvesse oma sihtrühma ja sisu konteksti. Globaalse publiku puhul võib selguse ja loetavuse eelistamine tähendada lihtsamate, universaalsemalt mõistetavate tüpograafiliste seadete valimist või kasutajatele vaatamiskogemuse kohandamise võimaluste pakkumist.

Fondi litsentsimine ja ligipääsetavus

Veebifontide kasutamisel pöörake alati erilist tähelepanu litsentsilepingutele. Mõned fondilitsentsid võivad piirata teatud OpenType'i funktsioonide kasutamist või nõuda spetsiifilist omistamist. Veenduge, et teie valitud fondid on litsentseeritud veebikasutuseks ja nende funktsioonide jaoks, mida kavatsete kasutada.

Lisaks arvestage ligipääsetavusega. Kuigi täiustatud tüpograafilised funktsioonid võivad esteetikat parandada, veenduge, et need ei takistaks loetavust nägemispuudega või kognitiivsete erinevustega kasutajate jaoks. Testige oma disaine ligipääsetavuse tööriistade ja kasutajate tagasiside abil.

Praktilised näited ja parimad tavad

Kinnistame oma arusaamist mõne praktilise näite ja parima tavaga OpenType'i funktsioonide juhtimise rakendamiseks.

1. Toimetusliku sisu täiustamine

Artiklite, blogide või mis tahes pikema teksti puhul võib OpenType'i funktsioonide kasutamine luua peenema ja loetavama kogemuse.

            
@font-feature-values 'Merriweather' {
  .editorial {
    ligatures: normal;
    oldstyle-nums: on;
    contextual-alternates: on;
    case: small-caps;
  }
}

.article p {
  font-family: 'Merriweather', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  font-feature-values: 'Merriweather' editorial;
}

.article p .acronym {
  font-feature-values: 'Merriweather' case(small-caps);
}

            

              
                Copy
              
            
          

Selgitus: See rakendab artikli lõikudes olevatele akronüümidele ligatuure, vana stiili numbreid, kontekstuaalseid alternatiive ja kapiteele. `oldstyle-nums` kasutamine aitab numbritel tekstis loomulikumalt sulanduda.

2. Silmapaistvate pealkirjade loomine

Pealkirjad on sageli koht, kus saate katsetada stiilsemate OpenType'i funktsioonidega, et neid esile tõsta.

            
@font-feature-values 'Playfair Display' {
  .headline-style {
    ligatures: discretionary;
    swashes: swash(3);
    stylistic-alternates: stylistic(2);
  }
}

h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  font-feature-values: 'Playfair Display' headline-style;
}

            

              
                Copy
              
            
          

Selgitus: See näide kasutab valikulisi ligatuure, spetsiifilist ehisvarianti ja stiililist alternatiivi, et anda peapealkirjale kunstilisem ja unikaalsem välimus.

3. Andmete esitluse optimeerimine

Tabelite, finantsaruannete või armatuurlaudade puhul on tabelinumbrid ja täpne vahekaugus üliolulised.

            
@font-feature-values 'Roboto Mono' {
  .tabular-data {
    tabular-nums: on;
    case: normal;
    ligatures: off;
  }
}

table td {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9rem;
  font-feature-values: 'Roboto Mono' tabular-data;
}

            

              
                Copy
              
            
          

Selgitus: See tagab, et tabelites olevad numbrid joonduvad tänu tabelinumbritele ideaalselt, ja keelab ligatuurid, mis võivad segada numbrite loetavust. Kapiteelid on samuti välja lülitatud, et säilitada ühtlane tähekõrgus.

Parimate tavade kontrollnimekiri:

• Tundke oma fonti: Tutvuge alati fondi dokumentatsiooniga, et mõista selle OpenType'i funktsioonide tuge ning funktsioonisiltide ja stiilikomplektide spetsiifilisi tähendusi.
• Kasutage @font-feature-values: Kasutage seda at-reeglit puhtama ja paremini hooldatava CSS-i jaoks, eriti temaatiliste stiilide defineerimisel.
• Eelistage loetavust: Kuigi stilistilised funktsioonid on ahvatlevad, veenduge, et need ei kahjustaks loetavust, eriti leivateksti ja globaalse publiku puhul.
• Arvestage keelega: Kasutage CSS-i lang() atribuuti, et vajadusel rakendada keelepõhiseid tüpograafiareegleid.
• Ligipääsetavus ennekõike: Testige oma tüpograafilisi valikuid ligipääsetavust silmas pidades. Vältige liiga dekoratiivseid funktsioone, mis võivad takistada ekraanilugejaid või vaegnägijaid.
• Jõudlus: Pidage meeles, et paljude OpenType'i funktsioonide lubamine võib mõnikord mõjutada fondi renderdamise jõudlust. Testige erinevates seadmetes.
• Brauseritugi: Kuigi kaasaegsed brauserid pakuvad head tuge OpenType'i funktsioonidele CSS-i kaudu, kontrollige alati ühilduvust vanemate brauseritega, kui teie sihtrühm seda nõuab. font-feature-settings omab üldiselt laiemat tuge kui spetsiifilisemad font-variant-* atribuudid või @font-feature-values.
• Varufondid: Määratlege oma CSS-is alati varufondid, et tagada teksti loetavus isegi siis, kui peamine font ei lae või ei toeta teatud funktsioone.

Kokkuvõte

CSS-i fondi funktsiooniväärtused, eriti atribuudi font-feature-settings ja at-reegli @font-feature-values kaudu, pakuvad enneolematut kontrolli OpenType-fontide keerukate võimaluste üle. Neid tööriistu meisterlikult kasutades saate luua veebikogemusi, mis pole mitte ainult visuaalselt vapustavad, vaid ka tüpograafiliselt rikkad ja kultuuriliselt kohandatavad.

Globaalse publiku jaoks ei ole see kontrollitase ainult esteetika küsimus; see on selguse, loetavuse ja mitmekesiste keeleliste ning kultuuriliste ootustega ühenduse loomise tagamine. Kasutage OpenType'i funktsioonide jõudu, et luua veebitüpograafiat, mis kõnetab tõeliselt kõiki ja kõikjal.